<!DOCTYPE html>
<html lang="en">
<head>
<title>Portal - Bootstrap 5 Admin Dashboard Template For Developers</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
<meta name="author" content="Xiaoying Riley at 3rd Wave Media">

<!-- FontAwesome JS--><script defer src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/5.14.0/js/all.min.js"></script><!-- App CSS -->
<link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">
</head>
<body class="app app-login p-0">
<div class="row g-0 app-auth-wrapper" id="wrap">
  <div class="col-12 col-md-7 col-lg-6 auth-main-col text-center p-5">
    <div class="d-flex flex-column align-content-end">
      <div class="app-auth-body mx-auto">
        <div class="app-auth-branding mb-4"><a class="app-logo" href="admin.html"><img class="logo-icon mr-2" src="assets/images/app-logo.svg" alt="logo"></a></div>
        <h2 class="auth-heading text-center mb-5">Log in to Portal</h2>
        <div class="auth-form-container text-left">

            <div class="email mb-3">

              <input  type="text" class="form-control signin-email" placeholder="账号 " required="required" v-model="User.username">
            </div>
            <!--//form-group-->
            <div class="password mb-3">
              <input   type="password" class="form-control signin-password" placeholder="密码" required="required" v-model="User.password">
              <div class="extra mt-3 row justify-content-between">

                <!--//col-6-->

                <!--//col-6--></div>
              <!--//extra--></div>
            <!--//form-group-->
            <div class="text-center">
              <input type="button" class="btn app-btn-primary btn-block theme-btn mx-auto" @click="login" value="登录"></input>
            </div>

          <div class="auth-option text-center pt-5">No Account? Sign up <a class="text-link" href="signup.html">here</a>.</div>
        </div>
        <!--//auth-form-container--></div>
      <!--//auth-body-->
      <footer class="app-auth-footer">
        <div class="container text-center py-3"><!----><small class="copyright">Designed with <i class="fas fa-heart" style="color: #fb866a;"></i>by <a class="app-link" href="#">Xiaoying Riley</a>for developers</small></div>
      </footer>
      <!--//app-auth-footer--></div>
    <!--//flex-column--></div>
  <!--//auth-main-col-->
  <div class="col-12 col-md-5 col-lg-6 h-100 auth-background-col">
    <div class="auth-background-holder"></div>
    <div class="auth-background-mask"></div>
    <div class="auth-background-overlay p-3 p-lg-5">
      <div class="d-flex flex-column align-content-end h-100">
        <div class="h-100"></div>
        <div class="overlay-content p-3 p-lg-4 rounded">
          <h5 class="mb-3 overlay-title">Explore Portal Admin Template</h5>
          <div>Portal is a free Bootstrap 5 admin dashboard template. You can download and view the template license <a href="">here</a>.</div>
        </div>
      </div>
    </div>
    <!--//auth-background-overlay--></div>
  <!--//auth-background-col--></div>
<!--//row-->
<script src="/dist/vue.js"></script>
<script src="/dist/axios.min.js"></script>
<script>
  var app = new Vue({
    el:"#wrap",
    data:{
      User:{},
    },
    methods:{
      //用户登陆
      login() {
        //发送登陆请求
        axios.post("http://localhost:8080/user/login",this.User).then(res=>{
          if (res.data.state)
          {
            if(res.data.user.role==="1"){
              alert(res.data.msg+"点击确定进入主页！");
              localStorage.setItem("user",JSON.stringify(res.data.user));
              location.href="/admin.html";
            }else{
              alert(res.data.msg+"点击确定进入主页！");
              localStorage.setItem("user",JSON.stringify(res.data.user));
              location.href="/user.html";
            }



          }else
          {
            alert(res.data.msg);
          }
        });
      }

    }

  });
</script>

</body>
</html>